import { NavigationContainer } from '@react-navigation/native'
import Login from '../pages/login'
import FooterTab from './footerTab'
import GoodDetail from '../pages/goodDetail'
import GoodSearchWrap from './goodSearchWrap'
import { createStackNavigator } from '@react-navigation/stack'
import GoodSearchTab from './goodSearchTab'
import CommonGoods from '../pages/commonGoods'
import ShareModel from '../pages/shareModel'
import GoodParams from '../pages/goodParams'
import Model from '../pages/model'
import MyWebView from '../pages/myWebView'
import CameraView from '../pages/camera'
import { useStore } from '../store'
import { useMemo } from 'react'
import { observer } from 'mobx-react-lite'
import VideoSwiper from '../pages/videoList/videoListSwiper'
import VideoCommentList from '../pages/videoList/videoCommentList'
import { RootStackParamList } from './type'
// const Stack = createNativeStackNavigator();
const Stack = createStackNavigator<RootStackParamList>()

export default observer(function Routes() {
  const { userStore, variableStore } = useStore()
  const initialRouteName = useMemo(() => {
    return userStore.getId ? 'Home' : 'Login'
  }, [userStore.getId])
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName={initialRouteName}
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Home" component={FooterTab} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="GoodDetail" component={GoodDetail} />
        <Stack.Screen name="GoodSearchWrap" component={GoodSearchWrap} />
        <Stack.Screen name="GoodSearchTab" component={GoodSearchTab} />
        <Stack.Screen name="CommonGoods" component={CommonGoods} />
        <Stack.Screen name="VideoSwiper" component={VideoSwiper} />
        <Stack.Screen name="Camera" component={CameraView} />
        <Stack.Screen
          name="VideoCommentList"
          component={VideoCommentList}
          options={{
            cardStyle: { backgroundColor: 'transparent' },
            presentation: 'transparentModal',
            gestureDirection: 'vertical',
            gestureResponseDistance: variableStore.screen.height * 0.8,
            cardStyleInterpolator() {
              return {
                containerStyle: {
                  opacity: 1,
                },
              }
            },
            gestureVelocityImpact: 0.2,
            transitionSpec: {
              open: {
                animation: 'timing',
                config: {
                  duration: 300,
                },
              },
              close: {
                animation: 'timing',
                config: {
                  duration: 300,
                },
              },
            },
          }}
        />

        <Stack.Screen
          name="ShareModel"
          component={ShareModel}
          options={{
            cardStyle: { backgroundColor: 'transparent' },
            presentation: 'transparentModal',
            animationEnabled: true,
            cardStyleInterpolator() {
              return {
                containerStyle: {
                  opacity: 1,
                },
              }
            },
          }}
        />
        <Stack.Screen
          name="GoodParams"
          component={GoodParams}
          options={{
            cardStyle: { backgroundColor: 'transparent' },
            presentation: 'transparentModal',
            animationEnabled: true,
            cardStyleInterpolator() {
              return {
                containerStyle: {
                  opacity: 1,
                },
              }
            },
          }}
        />
        <Stack.Screen
          name="Model"
          component={Model}
          options={{
            cardStyle: { backgroundColor: 'transparent' },
            presentation: 'transparentModal',
            animationEnabled: false,
          }}
        />
        <Stack.Screen component={MyWebView} name="MyWebView" />
      </Stack.Navigator>
    </NavigationContainer>
  )
})
